<template>
    <div style="height: 6vh;background-color: #fff;padding: 10px 20px">
        <span style="line-height: 60px;font-size: 20px;">用户管理</span>
        <el-button type="primary" style="float: right;margin-top: 13px" @click="dialogVisible=true">新增用户</el-button>
    </div>
<!--    新增用户弹窗-->
    <el-dialog :title="dialogTitle" style="width: 1000px;padding: 40px;"v-model=dialogVisible :before-close="handClose">
      <el-form  :model="form" label-width="80px" label-position="top">
            <el-row :gutter="10">
               <el-col :span="12">
                 <el-form-item label="用户名">
                    <el-input v-model="user.username" placeholder="请输入用户名" :disabled="user.id!=null"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="手机号">
                   <el-input v-model="user.phone" placeholder="请输入手机号"></el-input>
                 </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="邮箱">
                  <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年龄">
                  <el-input v-model="user.age" placeholder="请输入年龄"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
             <el-col :span="6">
               <el-form-item label="职级">
                 <el-select placeholder="请选择" v-model="user.level" @change="loadLeader()">
<!--                   <el-option label="职员" value="10"></el-option>-->
<!--                   <el-option label="经理" value="20"></el-option>  -->
<!--                   <el-option label="总监" value="30"></el-option>-->
<!--                   <el-option label="总裁" value="40"></el-option>-->
                      <el-option v-for="item in levelOptions"  :label="item.label" :value="item.value"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="直属领导">
                  <el-select  placeholder="请选择" v-model="user.parentId">
                    <el-option
                        v-for="item in leaderOptions"
                        :label="item.username"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
             </el-col>
              <el-col :span="4">
                <el-form-item label="性别">
                  <el-radio-group v-model="user.gender">
                    <el-radio value="1" name="gender" >男</el-radio>
                    <el-radio value="0" name="gender" >女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态">
                  <el-radio-group v-model="user.status">
                    <el-radio value="1" name="status" >启用</el-radio>
                    <el-radio value="0" name="status" >禁用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handClose">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </template>
    </el-dialog>
<!--  用户查询卡片-->
    <el-card style="margin: 20px;height: 70px">
      <el-form :inline="true" :model="form" label-width="80px">
        <el-form-item label="用户搜素">
          <el-input v-model="searchUserForm.username" @keydown.enter="loadUser" placeholder="请输入用户名" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="用户状态" style="width: 290px;">
          <el-select v-model="searchUserForm.status" @change="loadUser" placeholder="请选择用户状态">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadUser">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
<!--  显示查询内容-->
    <el-card style="margin: 20px;">
      <el-table :data="userArr">
        <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名"  align="center"></el-table-column>
        <el-table-column prop="phone" label="电话"  align="center"></el-table-column>
        <el-table-column prop="createTime" label="加入时间"  align="center"></el-table-column>
        <el-table-column prop="status" label="状态"  align="center">
          <template #default="scope">
            <el-switch active-value="1" inactive-value="0" v-model="scope.row.status" @change="updateStatus(scope.row.id,scope.row.status)" :disabled="scope.row.level==40"></el-switch>
          </template>
        </el-table-column>
        <el-table-column  label="操作"  align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" :disabled="scope.row.level==40" @click="resetPwd(scope.row.id)">重置密码</el-button>
            <el-button link type="primary" size="small" :disabled="scope.row.level==40" @click="editUser(scope.row.id)">编辑</el-button>
            <el-button link type="primary" size="small" :disabled="scope.row.level==40" @click="delUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

//弹窗标题内容
const dialogTitle=ref('新增用户');
//弹窗是否显示
const dialogVisible=ref(false);
//维护员工职级
const levelOptions=ref([
  {label:'职员',value:'10'},
  {label:'经理',value:'20'},
  {label:'总监',value:'30'},
  {label:'总裁',value:'40'},
]);
//收集直属领导信息
const leaderOptions=ref([
  {username:'shaoyun',id:'1'},
  {username:'admin',id:'2'},
]);
//收集用户信息
const user=ref({
  username:'',
  phone:'',
  email:'',
  age:'',
  level:'',
  parentId:'',
  gender:'1',
  status:'1'
});

//添加/更新用户
const saveUser=()=>{
  let data=qs.stringify(user.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/users/save',data)
        .then((res)=>{
          if (res.data.code==2000){
            ElMessage.success('保存成功');
            dialogVisible.value=false;
            user.value={};
            loadUser();
          }else {
            ElMessage.error(res.data.msg);
          }
        });
};

//弹窗关闭
const handClose=()=>{
  if (confirm('是否关闭')){
    dialogVisible.value=false;
    user.value={};
  }
};

//加载页面同步加载数据
onMounted(()=>{
  loadUser();
})

//定义数组存储用户列表数据
const userArr=ref([]);
//定义对象保存查询条件
const searchUserForm =ref({
  username:'',
  status:''
})
//加载用户方法
const loadUser=()=>{
  let data=qs.stringify(searchUserForm.value);
  console.log('查询条件:'+data);
  axios.get(BASE_URL+'/v1/users/select?'+data)
  .then((res)=>{
    if (res.data.code==2000){
      userArr.value=res.data.data;
    }else {
      ElMessage.error(res.data.msg);
    }
  });
}
//清空搜素框
const resetSearch=()=>{
  searchUserForm.value={};
  loadUser();
}
//加载领导
const loadLeader=()=>{
  //如果选中了数据,需要清空
  leaderOptions.value=[];
  user.value.parentId='';
  let level=parseInt(user.value.level)+10;
  console.log(level);
  axios.get(BASE_URL+'/v1/users//select?level='+level)
        .then((res)=>{
          if (res.data.code=2000){
            leaderOptions.value=res.data.data;
          }else {
            ElMessage.error(res.data.msg);
          }
        });
};

//重置密码
const resetPwd=(userId)=>{
  console.log("当前用户id"+userId);
  axios.post(BASE_URL+'/v1/users/update/resetPwd/'+userId)
      .then((res)=>{
        if (res.data.code==2000){
          ElMessage.success('重置成功');
        }else {
          ElMessage.error(res.data.msg);
        }
      });
};
//编辑用户信息
const editUser=(userId)=>{
  dialogVisible.value=true;
  dialogTitle.value='编辑员工';
  axios.get(BASE_URL+'/v1/users/select?id='+userId)
        .then((res)=>{
          if (res.data.code==2000){
            //后端返回的集合,我们只有一条数据
            user.value=res.data.data[0];
            console.log("查询后给user新增属性id"+user.value.id);
            //返回的数据不完整,还有员工领导姓名
            let level=parseInt(user.value.level)+10;
            axios.get(BASE_URL+'/v1/users/select?level='+level)
                .then((res)=>{
                  if (res.data.code==2000) {
                    leaderOptions.value = res.data.data;
                  }else
                    ElMessage.error(res.data.msg);
                });
            //loadLeader();
          }else
            ElMessage.error(res.data.msg);
        });
};
//状态更改
const updateStatus=(id,status)=> {
  axios.post(BASE_URL+'/v1/users/update/status/'+id+'/'+status)
        .then((res)=>{
          if (res.data.code==2000){
            ElMessage.success('修改成功');
          }else
            ElMessage.error(res.data.msg);
          //操作失败按钮取反
            user.status=!user.status;
        });
};
//删除按钮
const delUser=(id)=>{
  if (confirm('确认删除')){
    axios.delete(BASE_URL+'/v1/users/deleteUser/'+id)
          .then((res)=>{
            if (res.data.code==2000){
              ElMessage.success('删除成功');
              loadUser();
            }else
              ElMessage.error(res.data.msg);
          });
  }
}

</script>

<style scoped>

</style>